<template>
  <div>
    <!-- 
      v-on(@) 指令：
      作用：注册事件
      语法：
      1、v-on:事件名 = "要执行少量的代码"，当逻辑只有一行代码就可以执行完毕的时候
      2、v-on:事件名 = "methods 中的函数名"，当点击时就会触发 methods 中的函数
      2、v-on:事件名 = "methods 中的函数名(参数1，参数2，参数3...)"
    -->
    <h1>银行卡余额：{{ money }}</h1>
    <!-- 第一种写法：一些简单的逻辑可以直接写在后面 -->
    <button @click="money += 10000">发工资</button>
    <button @click="money -= 1000">买花花</button>
    <!-- 第二种写法：将处理函数定义在 method 中 -->
    <button @click="manModel">潇洒</button>
    <!-- 第三种写法：调用处理函数并传参 -->
    <button @click="work(10)">私活</button>
  </div>
</template>

<script>
export default {
  // 经常变化的数据要定义在 data 函数中
  data() {
    return {
      money: 3000,
    }
  },
  // method 里面用于存放方法，方法是用来调用的
  methods: {
    manModel() {
      this.money -= 1000
    },
    work(num) {
      this.money += 500*num
    },
  },
}
</script>

<style>
</style>